<!--侧栏 文章锚点目录 -->
<template>
  <div class="article-catalog">
    <div class="catalog-title">
      目录
    </div>
    <el-scrollbar class="catalog-body" max-height="38.3333rem" ref="scrollCatalogRef">
      <ul class="catalog-list">
        <catalog-item>
          <!-- 活跃类catalog-active -->
          <item-content class="catalog-active" anchor="heading-0" title="一"></item-content>
          <item-content anchor="heading-1" title="1.1小标题"></item-content>
          <item-content anchor="heading-2" title="1.2小标题"></item-content>
          <item-content anchor="heading-3" title="1.3小标题"></item-content>
          <item-content anchor="heading-4" title="1.4小标题"></item-content>
        </catalog-item>
        <catalog-item>
          <item-content anchor="#test1" title="大标题"></item-content>
          <item-content anchor="#test2" title="小标题"></item-content>
          <item-content anchor="#test3" title="小标题"></item-content>
          <item-content anchor="#test4" title="小标题"></item-content>
        </catalog-item>
        <catalog-item>
          <item-content anchor="#test1" title="大标题"></item-content>
          <item-content anchor="#test2" title="小标题"></item-content>
          <item-content anchor="#test3" title="小标题"></item-content>
          <item-content anchor="#test4" title="小标题"></item-content>
        </catalog-item>
        <catalog-item>
          <item-content anchor="#test1" title="大标题"></item-content>
          <item-content anchor="#test2" title="小标题"></item-content>
          <item-content anchor="#test3" title="小标题"></item-content>
          <item-content anchor="#test4" title="小标题"></item-content>
        </catalog-item>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
import CatalogItem from './ArticleCatelog/CatalogItem.vue';
import ItemContent from './ArticleCatelog/ItemContent.vue';

export default {
  name: 'ArticleCatalog',
  data() {
    return {

    }
  },
  components: {
    CatalogItem,
    ItemContent
  },
  methods: {
    scrollCatalog() {//根据当前浏览的文章来选择滚动
      if (this.catalogTrack() > 0) this.$refs.scrollCatalogRef.wrap.scrollTop += 20;//向下滚动
      else if (this.catalogTrack() < 0) this.$refs.scrollCatalogRef.wrap.scrollTop -= 20;//向上滚动
      // const catalogBody=document.querySelector(".catalog-body");
      // this.$refs.scrollCatalogRef.wrap.scrollTop=this.catalogTrack()*catalogBody.clientHeight;
    },
    catalogTrack() {//锚点跟踪方法
      const catalogBody = document.querySelector('.catalog-body');
      function getOffsetTop(el) {//获取绝对高度
        return el.offsetParent
          ? el.offsetTop + getOffsetTop(el.offsetParent)
          : el.offsetTop
      };


      let currentHeading = document.querySelector('#heading-0');
      const headingSet=Array.from(document.querySelectorAll("[id^='heading-']"));
      for (let heading_it of headingSet) {//选中所有标题
        const heading = heading_it;
        //           console.log(heading.offsetTop);
        //           console.log(document.documentElement.scrollTop);
        if (heading.offsetTop - document.documentElement.scrollTop >= 60) {//滚下距离大于60则认为是当前访问的片段
          //             console.log(heading);
          break;
        }

        currentHeading = heading;//获取当前片段
      }
      const progress=(headingSet.indexOf(currentHeading)+1)/headingSet.length;//获取滚动进度


      //接下来从目录中选择对应的锚点
      const anchorName = currentHeading.getAttribute("id");
      const catalog = document.querySelector(`.catalog-item .item-content[anchor="${anchorName}"]`);//选择对应的目录项
      //随后，需要判定锚点是否在滚动视口之内

      // console.log("catalogBody_Height", getOffsetTop(catalogBody));
      // console.log("catalog_abs", getOffsetTop(catalog));

      // if (getOffsetTop(catalog) < getOffsetTop(catalogBody)) {
      //   return -1;//在可视区上方，向上滚-
      // } else if (getOffsetTop(catalog) > getOffsetTop(catalogBody) + catalogBody.offsetHeight) {
      //   return 1;//在可视区下方，向下滚+
      // } else return 0;
      if (catalog.clientHeight < catalogBody.clientHeight) {
        return -progress;//在可视区上方，向上滚-
      } else if (catalog.clientHeight > catalogBody.clientHeight + catalogBody.offsetHeight) {
        return progress;//在可视区下方，向下滚+
      } else return 0;
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollCatalog);
  }
}

// let items=document.getElementsByClassName('.item-content');
// console.log(items);

</script>

<style  scoped>
.article-catalog {
  background: #fff;
  border-radius: 3.9996px;
  padding: 0;
  width: 300px;
}

.catalog-title {
  font-weight: 500;
  padding: 15.996px 0;
  margin: 0 20.004px;
  font-size: 15.9996px;
  line-height: 24px;
  color: #1d2129;
  border-bottom: .9996px solid #e4e6eb;
}

.catalog-body {
  /* max-height: 38.3333rem; */
  height: 459.9996px;
  margin: 8.0004px 3.9996px 0 0;
  /* overflow-x:hidden */
}

.catalog-list {
  position: relative;
  line-height: 21.9996px;
  padding: 0 0 12px;
}

.sticky-block-box {
  position: fixed;
  top: 21.204px;
  width: inherit;
  transition: top .2s;
}

:deep(.el-scrollbar__wrap){
  overflow-x: hidden;
}
</style>
